<template>
    <div>授课时间:{{ attendence.when }}</div>
    <div>授课班级:{{ attendence.teacherName }}</div>
    <div>授课课程:{{ attendence.courseName }}</div>
    <div>授课教师:{{ attendence.teacherName }}</div>
    <div>状态:{{ attendence.state }}</div>
    <table>
        <thead>
            <tr>
                <th>学号</th>
                <th>姓名</th>
                <th>出勤状况</th>
            </tr>
        </thead>
        <tbody>
            <tr v-for="item in attendence.detail">
                <td>{{ item.studentId }}</td>
                <td>{{ item.studentName }}</td>
                <td>{{ item.state }}</td>
            </tr>
        </tbody>
    </table>

    <button v-show="attendence.state == '已确认'" @click="archiveAttend_">归档</button>
</template>
<script>

import { mapActions, mapState } from 'pinia'
import { useBaseStore } from '../../stores/base'
import { useCounsellorStore } from '../../stores/counsellor'
import { util } from '../../utils'
export default {
    inject: ['axios'],

    methods: {
        ...mapActions(useCounsellorStore, ['archiveAttend']),
        ...mapActions(useBaseStore, ['fetchAttendenceWithDetailArray']),


        archiveAttend_() {
            this.archiveAttend(this.attendence.id).then((attendenceId) => {
                window.alert(`提交成功`);
                this.$router.push(`attend_${this.attendence.id}`);
            })
        }

    },

    async mounted() {
        let attendDetailArray = await this.fetchAttendenceWithDetailArray(this.$route.params.attendId);
        this.attendence = util.convertAttendDetailArrayToAttendObject(attendDetailArray);
        this.attendence.when = util.when(this.attendence.startFrom, this.attendence.hours)
    },


    data() {
        /**
         * 哪个班，针对哪条curriculum（什么老师在什么时候给哪个班上的什么课）的签到/
         */
        return {
            attendence: {},//{id:1,curriculumId:1,courseId:1,courseName:'算法',teacherId:1,teacherName:'刘笑锋',startFrom:230212203,hours:3,detail:[{id,studentId,studentName,state}]}
        }
    },
}
</script>


<style>
@media (min-width: 1024px) {
    .about {
        min-height: 100vh;
        display: flex;
        align-items: center;
    }
}
</style>